<template>
  <el-select
    v-model="selectValues" :disabled="readOnly" filterable reserve-keyword :placeholder="placeholder"
    multiple default-first-option
  >
    <el-option v-for="o in options" :key="o.name" :label="o.name+','+o.label" :value="o.name"/>
  </el-select>
</template>

<script>
import {list} from "@/api/system/permission";

export default {
  name: "PermissionSelect",

  props: {
    value: {type: Array, default: null},
    readOnly: {type: Boolean, default: false},
    placeholder: {type: String, default: '请选择权限'}
  },

  data() {
    return {
      selectValues: null,
      options: [],
    }
  },

  watch: {
    value(val) {
      this.selectValues = val
    },

    selectValues(val) {
      this.$emit('input', val)
    }
  },

  mounted() {
    this.list()
  },

  methods: {
    list() {
      list().then(res => {
        this.options = res.data
      })
    },
  }
}
</script>

<style scoped>

</style>
